<template>
  <el-upload
    class="upload-demo"
    :action="action"
    list-type="picture-card"
    :limit="limit"
    :file-list="fileList"
    :on-success="handleUploadSuccess"
    :on-exceed="handleExceed"
    :before-remove="beforeRemove"
    :on-remove="handleRemove"
    :show-file-list="showFileList"
    :before-upload="beforeUpload"
    :accept="accept"
    :headers="uploadHeaders"
  >
    <template #default>
      <div v-if="fileList.length < limit" class="upload-add-icon">+</div>
    </template>
    <template #file="{ file }">
      <div>
        <div v-if="type == ''">
          <img
            class="el-upload-list__item-thumbnail"
            :src="Default ? Default : `${config.baseUrl}${file.url}`"
            alt=""
          />
        </div>
        <div v-else style="display: flex;flex-direction: column;align-items: center;width: 100%;">
          <el-image
            class="el-upload-list__item-thumbnail"
            :src="`${config.baseUrl}${file.url}`"
                style="width: 80%; height: 80%"
          >
            <template #error>
              <img
                v-if="file.type=='pdf'"
                src="@/assets/PDF.png"
                alt=""
              />
              <img v-else-if="file.type=='zip'" src="@/assets/zip.png" alt="">
              <img v-else-if="file.type=='rar'" src="@/assets/zip.png" alt="">
            </template>
          </el-image>
          <span>{{ file.name }}</span>
        </div>
        <span class="el-upload-list__item-actions">
          <span
            v-if="!disabled"
            class="el-upload-list__item-preview"
            @click="handlePreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { ElUpload } from "element-plus";
import config from "@/utils/config";

const props = defineProps({
  action: {
    type: String,
    required: true,
  },
  fileKey: {
    type: String,
    required: true,
  },
  limit: {
    type: Number,
    default: 1,
  },
  fileList: {
    type: Array,
    default: () => [],
  },
  showFileList: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  accept: {
    type: String,
    default: "image/*",
  },
  uploadHeaders: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
  Default: {
    type: String,
    default: false,
  },
  //   onSuccess: {
  //     type: Function,
  //     required: true,
  //   },
  //   onRemove: {
  //     type: Function,
  //     required: true,
  //   },
  //   onPreview: {
  //     type: Function,
  //     required: true,
  //   },
});
const emit = defineEmits(["onSuccess", "onRemove", "onPreview"]);
const handleUploadSuccess = (response, file, fileList) => {
  const fullPath = `${response.fileName}`;
  const updatedFileList = fileList.map((item) => ({
    uid: item.uid,
    url: fullPath,
  }));
  emit("onSuccess", updatedFileList, props.fileKey, response.fileName);
};

const handleExceed = () => {
  ElMessage.error("最多上传一份");
};

const handleRemove = (file) => {
  emit("onRemove", file, props.fileKey);
};
const handlePreview = (file) => {
  emit("onPreview", file);
};
const beforeRemove = (file, fileList) => {
  return new Promise((resolve) => {
    if (props.disabled) {
      resolve(false);
    } else {
      resolve(true);
    }
  });
};

const beforeUpload = (file) => {
  // You can add any custom logic here for before uploading a file
  return true;
};
</script>

<style scoped>
.upload-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  color: #347ff7;
}

.el-upload-list__item-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.el-upload-list__item-thumbnail img{
  width: 100%;
  height: 100%;
}
.el-upload-list__item-actions {
  display: flex;
  justify-content: space-between;
  padding: 5px;
}

.el-upload-list__item-preview {
  cursor: pointer;
}

.el-upload-list__item-delete {
  cursor: pointer;
  color: red;
}
</style>
